<template>
  <div style="margin: 10px 0">
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in statisticsLits" :key="item.id">
        <Register :item="item"></Register>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import Register from './Register.vue'
  interface RegisterType {
    id: Number
    iconName: String
    count: Number
    title: String
    percentage: String
  }
  const statisticsLits = ref<RegisterType[]>([
    {
      id: 1,
      iconName: 'shangsheng',
      count: 5269,
      title: '访问量',
      percentage: '+14%',
    },
    {
      id: 2,
      iconName: 'wenjian',
      count: 911,
      title: '下载量',
      percentage: '+50%',
    },
    {
      id: 3,
      iconName: 'huiyuan',
      count: 8888,
      title: '会员总数',
      percentage: '+25%',
    },
    {
      id: 4,
      iconName: 'chajian',
      count: 875,
      title: '已装插件数',
      percentage: '+88%',
    },
  ])
</script>

<style lang="scss" scoped></style>
